<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>adding variables to an animation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh23";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb23">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 4759px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 4759px;">
 <span class="xr_ar" style="left: -564px; top: 4694px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s1" style="position: absolute; left:36px; top:189px; width:687px; height:91px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Spriter Pro offers the ability to add and several gameplay related types of data to your animations, with the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">ability to change their values or settings at any time throughout the animation. These values, if numerical </span>
  <span class="xr_tl xr_s1" style="top: 21px;">can even tween smoothly from one keyframe to the next. If this sounds confusing so far, don&#8217;t worry, We&#8217;ll </span>
  <span class="xr_tl xr_s1" style="top: 39px;">go over the diferent data types and an example use one by one.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:380px; top:128px; width:10px; height:10px;">
  <span class="xr_tc xr_s4" style="left: -140px; top: -14px; width: 280px;">Adding Variables to an Animation</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t22054" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t22054 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="exporting%20animations%20as%20images%20or%20gifs.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="exporting%20animations%20as%20images%20or%20gifs.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 4643px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20tags%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 4643px; width: 34px; height: 34px;"/>
 </a>
 <div class="xr_s1" style="position: absolute; left:36px; top:276px; width:678px; height:95px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">VARIABLES:&nbsp; </span>Variables can be alpha-numeric (test), floats (numbers with decimal points), or intigers </span>
  <span class="xr_tl xr_s1" style="top: 3px;">(whole numbers).&nbsp; You can give variables any name you&#8217;d like, and even give them a default value to </span>
  <span class="xr_tl xr_s1" style="top: 21px;">start off with. Variables are a way to have your Spriter antimations tell your game engine all kinds of </span>
  <span class="xr_tl xr_s1" style="top: 39px;">information that can change aspects of gameplay, visual que&#8217;s for the user etc.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:365px; width:684px; height:54px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">TEXT VARIABLES:</span>&nbsp;Some-times text is more useful or easy to understand than numbers, and can either </span>
  <span class="xr_tl xr_s1" style="top: 3px;">communitcate a string to your game engine, or directly to the player. </span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:575px; width:673px; height:216px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">EXAMPLE:</span>&nbsp;Imagine you were making a game in which there were animated devices on screen that </span>
  <span class="xr_tl xr_s1" style="top: 3px;">would display specific letters or words, and cycle through, changing the word or letter they display over </span>
  <span class="xr_tl xr_s1" style="top: 21px;">time, on a loop.&nbsp; The player can click on the device while its displaying that specific letter or word in </span>
  <span class="xr_tl xr_s1" style="top: 39px;">order to input that specific letter or word to the game, perhaps to solve a puzzle or answer a question.</span>
  <span class="xr_tl xr_s1" style="top: 74px;">Of course you could just check the specific times alonfg the timeline in Spriter where each letter or word </span>
  <span class="xr_tl xr_s1" style="top: 92px;">is displayed and hard-code those time intervals into your game engine to represent each character...but </span>
  <span class="xr_tl xr_s1" style="top: 110px;">not only is this tedious and unintuitive, it would mean if you changed the timing of your animation </span>
  <span class="xr_tl xr_s1" style="top: 127px;">you&#8217;d need to check and replace all your hardcoded time numbers in the game engine which represent </span>
  <span class="xr_tl xr_s1" style="top: 145px;">each letter or word. Luckily, With Spriter pro you can work in a much more intuitive and flaexible </span>
  <span class="xr_tl xr_s1" style="top: 163px;">manner.&nbsp; Here&#8217;s how.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1003px; width:673px; height:117px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">1) </span>Expand your timeline pannel upward to<span class="xr_s4" style="">&nbsp;</span>reveal the timelines for each specific object.&nbsp; If you scroll to </span>
  <span class="xr_tl xr_s1" style="top: 3px;">the very bottom of all timelines you&#8217;ll see a timeline titled &#8220;meta data&#8221; Double click in the meta data </span>
  <span class="xr_tl xr_s1" style="top: 21px;">timeline exactly where the first letter or word is visible and should now be clickable to the player.&nbsp; This </span>
  <span class="xr_tl xr_s1" style="top: 39px;">will bring up a dialogue which you will use to create and edit your &#8220;current word&#8221; variable.&nbsp; Type in the </span>
  <span class="xr_tl xr_s1" style="top: 57px;">name you&#8217;d like for your variable in the find/create variable box at the top-left of the dialogue, then click </span>
  <span class="xr_tl xr_s1" style="top: 74px;">the &#8220;create variable&#8221; box.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1363px; width:673px; height:117px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">2) </span>This will bring up a second dialogue box which will allow you to set the type (we want text),&nbsp; and the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">default value.&nbsp; If the animation starts on a specific word or letter you can set&nbsp; that as the default if you&#8217;d </span>
  <span class="xr_tl xr_s1" style="top: 21px;">like. In this example we&#8217;ll assume the animated device is displaying the letter &#8220;A&#8221; by default.&nbsp; Once </span>
  <span class="xr_tl xr_s1" style="top: 39px;">you&#8217;ve entered your starting word or letter, (if there is no starting word or letter, just leave the default </span>
  <span class="xr_tl xr_s1" style="top: 57px;">blank.) click &#8220;create variable&#8221;.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:1702px; width:673px; height:117px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">3) </span>You&#8217;ll now see your variable in the variable list in the &#8220;Edit MetaData&#8221; dialogue box.&nbsp; Click on the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">&#8220;active in key&#8221; checkboc and this will create a keyframe in the metadata timeline for this new variable.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Now you can doubleclick on the &#8220;current value&#8221; box and type in the word or letter that the device </span>
  <span class="xr_tl xr_s1" style="top: 39px;">animation is currently displaying. Once you&#8217;ve finished typing the letter or word, press enter and then </span>
  <span class="xr_tl xr_s1" style="top: 57px;">close the dialogue box via the red X close icon at the top right of the window. Don&#8217;t worry, your changes </span>
  <span class="xr_tl xr_s1" style="top: 74px;">will be automatically saved. </span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2114px; width:673px; height:117px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">4) </span>Now you should double click later on in the timeline, when the animation is either showing no letter </span>
  <span class="xr_tl xr_s1" style="top: 3px;">or word, or has changed to a new letter or word. This will bring the &#8220;Edit MetaData&#8221; dialogue back up. </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Now reselct the variable you&#8217;ve already made by left clicking on it&#8217;s name, and then check the &#8220;active in </span>
  <span class="xr_tl xr_s1" style="top: 39px;">key&#8221; checkbox again.&nbsp; Now you can double click in the &#8220;current value&#8221; box again and enther the new </span>
  <span class="xr_tl xr_s1" style="top: 57px;">text value for the new letter or word that&#8217;s being displayed by the animation.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2257px; width:673px; height:273px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">5) </span>Once you&#8217;ve repeated step 4 for the entire animation so that all visible letters have a corresponding </span>
  <span class="xr_tl xr_s1" style="top: 3px;">text value set in the metadata for that portion of the timeline, then save your Spriter project.</span>
  <span class="xr_tl xr_s1" style="top: 39px;">In the game engine itself, once this Spriter file is being read and displayed, the logic of the game engine </span>
  <span class="xr_tl xr_s1" style="top: 57px;">would be somehting like:</span>
  <span class="xr_tl xr_s1" style="left: 38px; top: 92px;">Is the player clicking on the Spriter object displaying the device animation?</span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 127px;">If yes, then set the text value of the letter or word to the current value of the &#8220;current vord&#8221; </span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 145px;">variable from the metadata.</span>
  <span class="xr_tl xr_s1" style="top: 198px;">Then you&#8217;d have the game react accordingly depending on whether or not the word or letter the playe </span>
  <span class="xr_tl xr_s1" style="top: 216px;">rclicked on was the apropriate answer.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2549px; width:673px; height:104px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">INTIGER AND FLOAT VARIABLES</span>&nbsp;work exactly the same, except they are useful when you need to </span>
  <span class="xr_tl xr_s1" style="top: 3px;">communicate changing numerical data to your game engine, depending on the current time of the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">currently playing animation.&nbsp; One cool bonus to numerical variables is that they automatically tween </span>
  <span class="xr_tl xr_s1" style="top: 39px;">between each of their keyframes in the metadata timeline if the numerical value is different on each of </span>
  <span class="xr_tl xr_s1" style="top: 57px;">the key frames.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2680px; width:673px; height:129px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">PER OBJECT METADATA: </span>In the previous example we created a variable in the metadata for the </span>
  <span class="xr_tl xr_s1" style="top: 3px;">entire animation. This is useful if the data you wish to create is relative to the timing of the entire </span>
  <span class="xr_tl xr_s1" style="top: 21px;">animation, but there&#8217;s a better option for when you want to create and communicate value which should </span>
  <span class="xr_tl xr_s1" style="top: 39px;">related directly to specific objects within the animation.</span>
  <span class="xr_tl xr_s1" style="top: 74px;">We&#8217;ll use collision rectangles as an example:</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2814px; width:673px; height:122px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">Assigning Numeric Data to a collision rectangle:&nbsp; </span>As you might already know, you can place as many </span>
  <span class="xr_tl xr_s1" style="top: 3px;">distinct collision rectangles as you&#8217;d like at any given point along the time line of an animation. Their </span>
  <span class="xr_tl xr_s1" style="top: 21px;">size, shape, and angle can tween between their key frames.&nbsp; Each Collision rectangle can have a diferent </span>
  <span class="xr_tl xr_s1" style="top: 39px;">name.&nbsp; This allone offers some pretty awesome control of game play related data right within Spriter, but </span>
  <span class="xr_tl xr_s1" style="top: 57px;">Spriter takes it much further than that....</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:44px; top:3285px; width:673px; height:106px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">1)&nbsp; </span>If you click on the little &#8220;+&#8221;icon to the right of the name of any objects timeline in the time line </span>
  <span class="xr_tl xr_s1" style="top: 3px;">palette it will expand to reveal the metadata timeline for that specific object.&nbsp; This works exactly like the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">metadata we&#8217;ve created the text variable for earlier, but now this creates variables specifically for that </span>
  <span class="xr_tl xr_s1" style="top: 39px;">particular object!</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:2944px; width:673px; height:52px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">EXAMPLE: </span>In this example we&#8217;ll be adding a variable to a collision rectangle to control the amount of </span>
  <span class="xr_tl xr_s1" style="top: 3px;">damage it would inflict when it collides with enemies within a game.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:3652px; width:673px; height:153px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">2)&nbsp; </span>In our example we have a punching animation for a fighting game, with a collision rectange to </span>
  <span class="xr_tl xr_s1" style="top: 3px;">designate the part of the animation that should do damage to an anemy character to the game if the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">rectangle overlaps the enemy. We&#8217;ve named this rectangle &#8220;AttackBox&#8221;.&nbsp; Just as in the previous example </span>
  <span class="xr_tl xr_s1" style="top: 39px;">for the text variable lets double click in the meta data timeline and add a variable, called &#8220;damage&#8221;, and </span>
  <span class="xr_tl xr_s1" style="top: 57px;">decide if its type os going to be float or intiger.&nbsp; For most game types intiger would be fine.&nbsp; Lets leave </span>
  <span class="xr_tl xr_s1" style="top: 74px;">its default value blank, and set its current value to 10. Dont forget to make sure its set to &#8220;active in key&#8221;.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:4075px; width:673px; height:91px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">3)&nbsp; </span>Now we&#8217;ll do the same thing, when the punch is at its apex (when it would do the most damage on </span>
  <span class="xr_tl xr_s1" style="top: 3px;">impact) and well double click at that spot further along in the timeline so we can set the &#8220;current value&#8221; </span>
  <span class="xr_tl xr_s1" style="top: 21px;">to a higher number. So lets check the &#8220;active in key&#8221; box, then double click the &#8220;current value&#8221; box and </span>
  <span class="xr_tl xr_s1" style="top: 39px;">then set it to 20.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:4180px; width:673px; height:189px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">In your game&#8217;s engine, the logic would be something like this:</span></span>
  <span class="xr_tl xr_s1" style="left: 38px; top: 21px;">Uppon overlap of player Damage Collision box and an enemy.</span>
  <span class="xr_tl xr_s1" style="left: 38px; top: 39px;">AND the enemy is in a state where it can take damage.</span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 74px;">THEN make the enemy play his taking damage animation.</span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 92px;">AND temporarily set the enemy&#8217;s state so it can no longer take damage.</span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 110px;">AND subtract the current value of the Variable :Damage&#8221; from the Collision Rectangle </span>
  <span class="xr_tl xr_s1" style="left: 76px; top: 127px;">called &#8220;Damage&#8221; from the hitpoints of that specific enemy.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:4363px; width:673px; height:91px;">
  <span class="xr_tl xr_s1" style="top: -14px;">As you can see, Spriter makes creating, editing and tweaking game play related data, and synchronizing </span>
  <span class="xr_tl xr_s1" style="top: 3px;">it perfectly with each animation very easy and intuitive.&nbsp; In this example, not only have we included the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">hit strength of a punch right into its collision rectangle, but we even made the number tween and change </span>
  <span class="xr_tl xr_s1" style="top: 39px;">depending on how much damage that punch in motion would inflict if it collided with an enemy at that </span>
  <span class="xr_tl xr_s1" style="top: 57px;">specific milisecond!</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:4483px; width:673px; height:181px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Be sure to read the next section: &#8220;Adding &#8220;Tags&#8221; to an Animation&#8221;, because Tags are the other, super </span>
  <span class="xr_tl xr_s1" style="top: 3px;">powerful and flexible half of the example logic I provided above for the collision box delivering the </span>
  <span class="xr_tl xr_s1" style="top: 21px;">damage ot the enemy. Specifically the portion:&#8220;AND the enemy is in a state where it can take damage.&#8221;</span>
  <span class="xr_tl xr_s1" style="top: 57px;">Tags are Spriters easy and intuitive way to designate what &#8220;state&#8221; your entity or character is in at any </span>
  <span class="xr_tl xr_s1" style="top: 74px;">moment along the time line of each animation.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/264.jpg" alt="" title="" style="left: 221px; top: 398px; width: 281px; height: 149px;"/>
 <img class="xr_ap" src="index_htm_files/265.jpg" alt="" title="" style="left: 200px; top: 771px; width: 330px; height: 197px;"/>
 <img class="xr_ap" src="index_htm_files/266.jpg" alt="" title="" style="left: 195px; top: 1106px; width: 370px; height: 224px;"/>
 <img class="xr_ap" src="index_htm_files/267.jpg" alt="" title="" style="left: 25px; top: 1455px; width: 348px; height: 211px;"/>
 <img class="xr_ap" src="index_htm_files/268.jpg" alt="" title="" style="left: 380px; top: 1455px; width: 347px; height: 211px;"/>
 <img class="xr_ap" src="index_htm_files/269.jpg" alt="" title="" style="left: 122px; top: 1811px; width: 501px; height: 269px;"/>
 <img class="xr_ap" src="index_htm_files/270.jpg" alt="" title="" style="left: 130px; top: 2989px; width: 500px; height: 258px;"/>
 <img class="xr_ap" src="index_htm_files/271.jpg" alt="" title="" style="left: 130px; top: 3361px; width: 500px; height: 258px;"/>
 <img class="xr_ap" src="index_htm_files/272.jpg" alt="" title="" style="left: 122px; top: 3772px; width: 501px; height: 258px;"/>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="adding%20tags%20to%20an%20animation.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>